<template>
  <header class="header">
    <div class="icon-area left">
      <span :class="'iconfont icon-' + leftIcon" @click="goBackPage"></span>
    </div>
    <h1>{{title}}</h1>
    <div class="icon-area right">
      <!-- 有可能是detail页面 -->
      <span v-if="right && name === 'Detail'" :class="'iconfont icon-' + rightIcon" @click="handleFollowClick"></span>
      <!-- 有可能是首页 -->
      <router-link :to="rightPath" v-else-if="right && name !== 'Detail'">
        <span :class="'iconfont icon-' + rightIcon"></span>
      </router-link>
    </div>
  </header>
</template>

<script lang="ts">
// defineComponent是ts类型推断
import { defineComponent, reactive, toRefs, watch } from "vue";
import {
  useRoute,
  RouteLocationNormalizedLoaded,
  useRouter,
  Router,
} from "vue-router";
import { IHeaderInfo } from "../../typings";
import {
  useFollowCheck,
  useNewsFollow,
  useRouteInfo,
} from "../../compositions";
import { Store, useStore } from "vuex";

export default defineComponent({
  name: "Header",
  setup() {
    //路由切换时
    const route: RouteLocationNormalizedLoaded = useRoute();
    //使用路由对象
    const router: Router = useRouter();
    const store: Store<any> = useStore();

    const state: IHeaderInfo = reactive({
      name: "Home",
      title: "新闻头条",
      left: false,
      right: true,
      leftIcon: "",
      rightIcon: "mine",
      leftPath: "",
      rightPath: "/mynews",
    });

    //监听路由的name属性变化
    watch(
      () => {
        return route.name;
      },
      //参数为变换后的值
      (routeName) => {
        //route.name发生更改时执行程序
        //获取路由里的headerInfos里的某一项对象
        //routeName有可能是symbal 需要断言为string
        //拿到切换路由时的路由信息
        const routeInfo: IHeaderInfo | undefined = useRouteInfo(
          routeName as string
        );

        //合并更新state数据
        Object.assign(state, routeInfo);

        //route.name为Detail时说明进入了新闻详情页面
        if (routeName === "Detail") {
          useFollowCheck(route, (status) => {
            //根据收藏状态修改图标样式
            state.rightIcon = status ? "star-full" : "star-o";
          });
        }
      }
    );

    //导航页面
    const goBackPage = (): void => {
      router.go(-1);
    };

    //点击切换 收藏/非收藏
    const handleFollowClick = (): void => {
      useNewsFollow(store, (status) => {
        //根据收藏状态修改图标样式
        state.rightIcon = status ? "star-full" : "star-o";
      });
    };

    return {
      ...toRefs(state),
      goBackPage,
      handleFollowClick,
    };
  },
});
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 0.44rem;
  background-color: #cf5f55;
  color: #fff;

  h1 {
    text-align: center;
    line-height: 0.44rem;
    font-size: 0.18rem;
  }

  .icon-area {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 0.44rem;
    height: 0.44rem;

    &.left {
      left: 0;
    }

    &.right {
      right: 0;
    }

    a {
      color: #fff;
    }

    .icon-mine {
      font-size: 0.25rem;
    }

    .iconfont.icon-arrow-right {
      vertical-align: 0.025rem;
    }

    .icon-star-o,
    .icon-star-full {
      font-size: 0.22rem;
      vertical-align: 0.025rem;
    }

    .icon-star-full {
      color: #f6bf4e;
    }
  }
}
</style>
